<template>
  <div class="saveUpdate">
    <el-dialog :title="id?'编辑问题类型配置':'新增问题类型配置'" :visible.sync="showDialog" @close="$emit('update:showUpdate', false)"
               :showUpdate="showUpdate" width="500px">
      <el-form :model="DetailInfo" ref="saveChn" label-width="150px" size="mini">
        <dialog-wrapper :MaxWidth="400">
          <el-form-item label="问题类型：" prop="desc">
            <el-input v-model="DetailInfo.desc" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="图片链接：">
            <!--<el-input v-model="DetailInfo.qr_code" placeholder="..."></el-input>-->
            <el-upload ref="uploadQr" class="avatar-uploader" :auto-upload="false" action list-type="picture-card"
                       :show-file-list="false" :multiple="false" :on-change="handlePictureCardPreviewAccount">
              <img v-if="DetailInfo.image" :src="DetailInfo.image" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="提交问题按钮名称：" prop="problems_type">
            <el-input v-model="DetailInfo.button" placeholder="请输入内容"></el-input>
          </el-form-item>
        </dialog-wrapper>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="$emit('update:showUpdate', false)" size="small">取 消</el-button>
        <el-button v-if="id" type="primary" :loading="loading" @click="updateDetail" size="small">确 定
        </el-button>
        <el-button v-else type="primary" :loading="loading" @click="saveDetail" size="small">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import DialogWrapper from '@/components/DialogWrapper'
  import {getProblemById, getQiniuUploadToken, qiniuUpload,updateProblemById,getPritureByKey} from '@/api'
  // import {uuid} from '@/utils/uuid'


  export default {
    components: {DialogWrapper},
    data() {
      return {
        showDialog: this.showUpdate,
        loading: false,
        newpicture: null,

        DetailInfo: {},
        imageUrl: '',
        fullscreenLoading: false,
        accountimageUrl: '',
        imgUrl:false,
        imgName:'',
      }
    },
    props: {
      showUpdate: {
        type: Boolean,
        default: false
      },
      id: {
        type: Number
      },
    },
    created() {
      if (this.id) {
        this.getDetail()
        this.header = getQiniuUploadToken()
      }
    },
    methods: {
      saveDetail() {
        this.$message({type: 'success', message: '保存成功'})
        this.$emit('update:showUpdate', false)
      },
      updateDetail() {
        if(this.imgUrl){
          this.DetailInfo.image = this.imgUrl
        }else{
          this.DetailInfo.image = this.imgName
        }
        updateProblemById(this.id,this.DetailInfo).then(res =>{
          if(res.status === 0){
            this.$message({ message: '编辑成功。', type: 'success' })
            this.$emit('update:showUpdate', false)
          }
        })
      },
      getDetail() {
        getProblemById(this.id).then(res => {
          if (res.status === 0) {
            this.DetailInfo = res.data
            this.imgName=this.DetailInfo._image
          }
        })

      },
      handlePictureCardPreviewAccount(f) {
        this.fileHandle(f, 'problem_p')
        this.accountimageUrl = URL.createObjectURL(f.raw);
      },
      fileHandle(f, qrtype) {
        this.loading=true
        getQiniuUploadToken().then(res => {
          if (res.status === 0) {
            let data = new FormData()
            //创建新文件对象（实现更名）
            var fileName =
              new Date().getTime() + f.name.substring(f.name.lastIndexOf('.'))
            data.append('file', f.raw)
            data.append('key', fileName)
            data.append('token', res.data.token)
            qiniuUpload(data).then(res => {
              this.$set(this.DetailInfo, qrtype, res.key)
              this.loading=false
              this.imgUrl=res.key
              getPritureByKey({url:res.key}).then(res =>{
                if(res.status === 0){
                  this.DetailInfo.image = res.data.path
                }
              })

            })
          }
        }).catch(()=>{
          this.$message.error('图片上传失败！')
        })
      }
    },
    watch: {
      showUpdate() {
        this.showDialog = this.showUpdate
      }
    }
  }
</script>


<style scoped lang="postcss">
  .el-tag .el-icon-close {
    top: -15px;
    right: -15px;
    border: 1px solid;
    background: #b4b3b3;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }

  .avatar {
    width: 148px;
    height: 148px;
    display: block;
  }
</style>


